<template>
  <div class="list-box">

    <el-table
        :data="taskList"
        v-loading="loading"
        v-if="$route.path === '/worker/plaza/invited'"
        element-loading-text="正在加载"
        element-loading-spinner="el-icon-loading"
    >
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="taskName" label="任务名称"></el-table-column>
      <el-table-column prop="userId" label="邀请者ID"></el-table-column>
      <el-table-column prop="type" label="测试类型"></el-table-column>
      <el-table-column prop="environment" label="测试环境">
        <template v-slot="scope">
          <img src="../../../assets/image/Apple.png" alt="" style="width: 20px" v-if="scope.row.environment.startsWith('iOS')">
          <img src="../../../assets/image/Android.png" alt="" style="width: 20px" v-else-if="scope.row.environment.startsWith('Android')">
          <img src="../../../assets/image/Huawei.png" alt="" style="width: 20px" v-else-if="scope.row.environment.startsWith('Harmony')">
          {{scope.row.environment}}
        </template>
      </el-table-column>
      <el-table-column prop="needNumber" label="需求情况"></el-table-column>
      <el-table-column prop="endTime" label="截止日期"></el-table-column>
      <el-table-column label="操作" width="130px">
        <template v-slot="scope">
          <el-button v-if="scope.row.need_num!==0" type="primary" @click="gotoDetail(scope.row.id)">参与测试</el-button>
          <el-button v-else-if="scope.row.need_num===0" type="info" disabled>人员已满</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table
        :data="taskList"
        v-loading="loading"
        v-else
        element-loading-text="正在加载"
        element-loading-spinner="el-icon-loading"
    >
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="taskname" label="任务名称"></el-table-column>
      <el-table-column prop="username" label="发布者"></el-table-column>
      <el-table-column prop="type" label="测试类型"></el-table-column>
      <el-table-column prop="environment" label="测试环境">
        <template v-slot="scope">
          <img src="../../../assets/image/Apple.png" alt="" style="width: 20px" v-if="scope.row.environment.startsWith('iOS')">
          <img src="../../../assets/image/Android.png" alt="" style="width: 20px" v-else-if="scope.row.environment.startsWith('Android')">
          <img src="../../../assets/image/Huawei.png" alt="" style="width: 20px" v-else-if="scope.row.environment.startsWith('Harmony')">
          {{scope.row.environment}}
        </template>
      </el-table-column>
      <el-table-column prop="need_num" label="需求情况"></el-table-column>
      <el-table-column prop="deadline" label="截止日期"></el-table-column>
      <el-table-column label="操作" width="130px">
        <template v-slot="scope">
          <span v-if="scope.row.need_num!==0" @click="gotoDetail(scope.row.id)">参与测试</span>
          <span v-else-if="scope.row.need_num===0">人员已满</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {getAllValidTasks, getInvitedTaskByWorkerID} from "@/api/task";

export default {
  name: "TaskList",


  created() {
    this.getTaskList();
  },

  data() {
    return {
      taskList: [],
      loading: true
    }
  },

  methods: {
    async getTaskList() {
      let res;
      if (this.$route.path === '/worker/plaza/all')
        res = await getAllValidTasks();
      else if (this.$route.path === '/worker/plaza/invited')
        res = await getInvitedTaskByWorkerID(sessionStorage.getItem('userid'));

      if (res.code === 500) {
        this.loading = false;
        return this.$message.error('获取任务列表失败');
      }
      if (res.code === 404) {
        this.loading = false;
        return this.$message.info('没有正在执行的任务');
      }

      res.data.forEach(obj => {
        let tmp = {};
        if (obj['type'] === 'function_test') tmp['type'] = '功能测试';
        else if (obj['type'] === 'performance_test') tmp['type'] = '性能测试';
        else if (obj['type'] === 'bug_explore') tmp['type'] = 'Bug探索';

        for (let key of Object.keys(obj)) {
          if (key !== 'type') {
            tmp[key] = obj[key];
          }
        }

        this.taskList.push(tmp);
      })

      this.loading = false;
    },

    gotoDetail(taskid) {
      this.$router.push(`/worker/plaza/detail/${taskid}`);
    }
  }
}
</script>

<style scoped>

</style>
